import React from 'react';
import { X } from 'lucide-react';
interface FilterOption {
  id: string;
  label: string;
}
interface FilterCategory {
  name: string;
  options: FilterOption[];
}
interface FilterSidebarProps {
  categories: FilterCategory[];
  selectedFilters: Record<string, string[]>;
  onFilterChange: (category: string, optionId: string) => void;
  onClearFilters: () => void;
  isMobile?: boolean;
  onClose?: () => void;
}
export function FilterSidebar({
  categories,
  selectedFilters,
  onFilterChange,
  onClearFilters,
  isMobile = false,
  onClose
}: FilterSidebarProps) {
  return <div className={`bg-white p-6 rounded-lg ${isMobile ? 'fixed inset-0 z-50 overflow-y-auto' : ''}`}>
      {isMobile && <div className="flex justify-between items-center mb-6">
          <h2 className="font-serif text-xl text-[#4a4a4a]">Filters</h2>
          <button onClick={onClose} className="text-[#4a4a4a] hover:text-[#4a6b60]" aria-label="Close filters">
            <X size={24} />
          </button>
        </div>}
      <div className="flex justify-between items-center mb-6">
        <h3 className="font-medium text-sm uppercase tracking-wider text-[#4a6b60]">
          Filter By
        </h3>
        <button onClick={onClearFilters} className="text-xs text-[#4a6b60] hover:underline">
          Clear All
        </button>
      </div>
      <div className="space-y-6">
        {categories.map(category => <div key={category.name} className="border-b border-[#e8e5e0] pb-6">
            <h4 className="font-medium text-sm mb-3">{category.name}</h4>
            <div className="space-y-2">
              {category.options.map(option => <div key={option.id} className="flex items-center">
                  <input type="checkbox" id={option.id} checked={selectedFilters[category.name]?.includes(option.id) || false} onChange={() => onFilterChange(category.name, option.id)} className="h-4 w-4 rounded border-[#e8e5e0] text-[#4a6b60] focus:ring-[#4a6b60]" />
                  <label htmlFor={option.id} className="ml-2 text-sm">
                    {option.label}
                  </label>
                </div>)}
            </div>
          </div>)}
      </div>
      {isMobile && <div className="mt-6 pt-6 border-t border-[#e8e5e0]">
          <button onClick={onClose} className="w-full bg-[#4a6b60] hover:bg-[#3d5a50] text-white py-3 rounded-md transition-colors">
            Apply Filters
          </button>
        </div>}
    </div>;
}